<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>旋转相册</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body,html{
                height: 100%;
            }
            body{
                overflow: hidden;
                background: black;
                /*-webkit-perspective:600px;
                -webkit-perspective-origin:center top;*/
            }
            ul{
                width: 600px;
                height: 600px;
                position: absolute;
                top:0;left:0;
                right:0;bottom: 0;
                margin: auto;
                /*border: 2px solid pink;*/
                transform-style: preserve-3d;
                /*transform: rotate3d(0,1,0,72deg);*/
                animation: box 20s linear infinite;
            }
            @keyframes box {
                0%{
                    transform: rotateX(-10deg) rotateY(0deg);
                }
                25%{
                    transform: rotateX(10deg) rotateY(90deg);
                }
                50%{
                    transform: rotateX(-10deg) rotateY(180deg);
                }
                75%{
                    transform: rotateX(10deg) rotateY(270deg);
                }
                100%{
                    transform: rotateX(-10deg) rotateY(360deg);
                }
            }
            li{
                width: 300px;
                height: 200px;
                border: 1px solid black;
                list-style: none;
                position: absolute;
                top:0;left:0;
                right:0;bottom: 0;
                margin: auto;
                transform-origin: center center -300px; }
            li:nth-of-type(1){
                background: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg");
                transform: translate3d(0,0,300px) rotate3d(0,1,0,0deg);
            }
            li:nth-of-type(2){
                background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2114611637,2615047297&fm=26&gp=0.jpg");
                transform: translate3d(0,0,300px) rotate3d(0,1,0,60deg);
            }
            li:nth-of-type(3){
                background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602688472563&di=f933b8f298f08afdc172efdf1cad1995&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg");
                transform: translate3d(0,0,300px) rotate3d(0,1,0,120deg);
            }
            li:nth-of-type(4){
                background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602688472563&di=4c672d45f045989ad57981f346571bc2&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F64%2F52%2F01300000407527124482522224765.jpg");
                transform: translate3d(0,0,300px) rotate3d(0,1,0,180deg);
            }
            li:nth-of-type(5){
                background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602688541786&di=716883ec7f97fcaf6ab341192818d34b&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F25%2F19%2F01300000167299127987196914835.jpg");
                transform: translate3d(0,0,300px) rotate3d(0,1,0,240deg);
            }
            li:nth-of-type(6){
                background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602688541776&di=70f0dcdcd5383eaf6a906caafcf5c452&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F10%2F01%2F01300000091985121196015965747.jpg");
                transform: translate3d(0,0,300px) rotate3d(0,1,0,300deg);
            }
        </style>
    </head>
    <body>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    </body>
</html>